<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>工厂生产情况</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f4f4f9;
      padding: 20px;
    }

    h1 {
      text-align: center;
      color: #333;
    }

    .factory-container {
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      margin-top: 20px;
    }

    .factory {
      background-color: #fff;
      border: 1px solid #ccc;
      border-radius: 10px;
      padding: 20px;
      width: 200px;
      text-align: center;
      margin: 10px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .factory-icon {
      font-size: 50px;
    }

    .factory-name {
      font-weight: bold;
      margin-top: 10px;
      color: #333;
    }

    .warehouse-info {
      margin-top: 5px;
      color: #666;
    }

    .progress-bar {
      width: 100%;
      background-color: #f3f3f3;
      border-radius: 5px;
      margin-top: 10px;
      overflow: hidden;
    }

    .progress-bar-inner {
      height: 20px;
      border-radius: 5px;
      background-color: #4caf50;
      width: 0;
      transition: width 0.5s ease-in-out;
    }
  </style>
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      const eventSource = new EventSource("/view/factoryList");

      eventSource.onmessage = function(event) {
        const factories = JSON.parse(event.data);
        const factoryContainer = document.getElementById('factoryContainer');
        factoryContainer.innerHTML = '';

        factories.forEach(factory => {
          const factoryDiv = document.createElement('div');
          factoryDiv.classList.add('factory');
          factoryDiv.innerHTML = `
                        <div class="factory-icon"></div>🏭</div>
                        <div class="factory-name"></div>${factory.name}</div>
                        <div class="warehouse-info"></div>${factory.productNums}/${factory.warehouseSize}</div>
                        <div class="progress-bar"></div>
                            <div class="progress-bar-inner" style="width: ${factory.productionProgress * 100}%;"></div></div>
                        </div>
                    `;
          factoryContainer.appendChild(factoryDiv);
        });
      };
    });
  </script>
</head>
<body>
<h1>工厂生产情况</h1>
<div id="factoryContainer" class="factory-container"></div></div>
</body>
</html>
